<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: royalblue;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // 1.  当我们手指触摸屏幕，记录当前触摸时间
        // 2.  当我们手指离开屏幕， 用离开的时间减去触摸的时间
        // 3.  如果时间小于150ms，并且没有滑动过屏幕， 那么我们就定义为点击

        var div = document.querySelector("div");

        tap(div, function (c) {//3
            console.log("被点击了");
            console.log(c);
        })

        function tap(element, callback) {
            // 记录用户点击触摸的时间
            var startTime = null;
            // 判断用户有没有滑动的行为
            var isMove = false;// 没有滑动

            element.addEventListener("click", function (e) {
                // 禁止默认点击事件
                e.preventDefault();

            })

            element.addEventListener("touchstart", function () {
                // 记录用户点击的时间
                startTime = Date.now();
            })

            // 如果用户在触摸移动，就通过变量 isMove记录下来
            element.addEventListener("touchmove", function () {
                isMove = true;
            })

            element.addEventListener("touchend", function (a) {//1
                // 记录间隔时间
                var interval = Date.now() - startTime;

                // 如果用户点击的间隔小于150ms,而且isMove是false就进入判断
                // 方法1
                if(interval < 150 && !isMove){
                    // 1.首先要知道我要让!isMove为true条件才可以走进来
                    // 2.然后我的isMove = false，我要让它走进来，所有我要取反，但是我的值是没有被改变的

                    // 短路运算 ，当callback为true,也就是有值,才执行后面的语句callback(e);
                    // 先传值，然后走到了这一步，再调用回调函数tap(div, function () {console.log("被点击了")});也相当于执行这个函数 
                    callback && callback(a);//2   //首先1里面的时间是addEventListener里面原生态的事件，然后它传给了2，1和2function里面的字母要一样，然后2传给3，3里面function的字母可以跟1，2不一样
                }
                // 方法2
                // if (interval < 150 && isMove === false) {
                //     // 短路运算 ，当callback为true,才执行后面的语句callback(e)
                //     callback && callback(e);

                // }
                startTime = null;
                isMove = false;
            })

        }
    </script>
</body>

</html>